<template>
  <div>
    <ul class="music-list">
      <li v-for="i in 5" :key="i">
        <div class="cover">
          <img
            src="http://qukufile2.qianqian.com/data2/pic/e7e21cf66583ac2392c82852c5dee7e1/672614017/672614017.jpg@s_2,w_1000,h_1000"
            alt
          />
        </div>
        <div class="intro">
          <div class="intro-title">标题</div>
          <div class="intro-author">作者</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.music-list {
  padding: 10px;
  li {
    display: flex;
    padding: 10px 0;
    // 设置左侧的收缩因子0
    .cover {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      border-radius: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    // 右侧 名字自适应，占满剩余的空间，设置扩张因子
    .intro {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 10px;

      // .intro-title
      &-author{
          color: #999;
          font-size: 14px;
      }
    }
  }
}
</style>